<template>
    <div>
        <ul class="homeList_wrap">
            <li v-for="(item, index) in homeList" :key="index">
                <router-link :to='{name:item.routeName}'>
                    <span>{{ item.title }}</span>
                    <span>{{ item.eltitle }}</span>
                    <i :class="item.iconClass"></i>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            homeList: [
                {
                    title: '柱状图 饼图',
                    eltitle: 'Course List',
                    iconClass: 'el-icon-s-order',
                    routeName: 'homeEcharts'
                },
                {
                    title: '折线图',
                    eltitle: 'Course List',
                    iconClass: 'el-icon-document-add',
                    routeName: 'homeLine'
                },
                {
                    title: '用户注册',
                    eltitle: 'Course List',
                    iconClass: 'el-icon-circle-plus-outline'
                },
                {
                    title: '视频管理',
                    eltitle: 'Course List',
                    iconClass: 'el-icon-video-camera-solid'
                },
                {
                    title: '用户注册',
                    eltitle: 'Course List',
                    iconClass: 'el-icon-menu'
                },
                {
                    title: '课程列表',
                    eltitle: 'Course List',
                    iconClass: 'el-icon-menu'
                }
            ]
        }
    },
    methods: {

    }
}
</script>

<style lang="less" scoped>
.homeList_wrap {
    margin-top: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;

    li>a {
        text-decoration: none;
        color:black;
        width: 130px;
        height: 130px;
        background-color: #4f527d7a;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;

        i {
            color: white;
            font-size: 35px;
        }
    }
    .router-link-active{
        color:white;
        background-color: #53569580;
    }
}
</style>